import React from 'react'
import { Text, View } from '@tarojs/components';
import i18n from '@I18N'
import MedicineName from './MedicineName';
import './index.scss'

const Medicine = ({
  medicines, language, showNoText,
  containerStyle, lastItemStyle,
  dotClassName, medicineClass, onClickItem, isShowBottom
}) => {
  if (!Array.isArray(medicines) || !medicines.length) {
    return showNoText ? <Text className="medicine-none-text">{i18n.common.none()}</Text> : null
  }
  const showMedicinesLength = medicines.length
  return (
    <View className={`medicine-container${containerStyle ? ` ${containerStyle}` : ''}`}>
      {medicines.map((item, index) => (
        <MedicineName
          key={index}
          item={item}
          onClick={onClickItem}
          dotClassName={dotClassName}
          name={item?.MedicineName?.[language]}
          lastItemStyle={showMedicinesLength - 1 === index ? lastItemStyle : null}
          medicineClass={medicineClass}
        />
      ))}
      {isShowBottom && <MedicineName name="..." hiddenDot />}
    </View>
  )
}

export default Medicine
